﻿<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="-1" />
    <title>jQuery Raty - A Star Rating Plugin</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.raty.min.js"></script>
    <style type="text/css">
        a#coffee-link, div#coffee-container { border-radius: 4px; -khtml-border-radius: 4px; -moz-border-radius: 4px; -opera-border-radius: 4px; -webkit-border-radius: 4px; }
        div#link a { color: #EA9C00; font: bold 10px verdana; letter-spacing: .9px; text-decoration: none; }
        div#link a:hover { color: #DC5; font: bold 10px verdana; letter-spacing: .9px; text-decoration: underline; }
        a#coffee-link { background: url('img/coffee.png') 6px 2px no-repeat; border: 1px solid #D9C640; color: #FFF; display: block; font: bold 10px verdana; letter-spacing: .9px; padding: 4px 5px 4px 26px; text-decoration: none; }
        a#coffee-link:hover { text-decoration: underline; }
        div#adsense { font: 10px verdana; color: #AB9927; text-indent: 7px; }
        div#coffee-container { background-color: #DC5; float: right; margin-right: 15px; }
        div.description { font: 10px verdana; color: #555; letter-spacing: .1px; margin-bottom: 10px; text-indent: 7px; text-align: left; width: 99%; }
        div#link { font: 10px verdana; color: #AB9927; text-indent: 7px; }
        div.notice { font: 9px verdana; color: #777; letter-spacing: .1px; margin-bottom: 3px; text-indent: 7px; text-align: left; width: 99%; }
        div.session { font: bold 13px verdana; border-bottom: 1px solid #EFEFEF; color: #444; letter-spacing: .7px; margin-bottom: 10px; margin-top: 24px; text-align: left; width: 99%; }
        div.source { background: #F8F8FF; border: 1px solid #EFEFEF; border-left: 3px solid #CCC; color: #444; font: 12px monospace; letter-spacing: .1px; margin-bottom: 7px; margin-top: 5px; padding: 7px; width: 99%; }
        div.text { font: 10px verdana; color: #555; letter-spacing: .1px; margin-bottom: 20px; margin-top: 5px; text-align: left; text-indent: 7px; width: 99%; }
        div.title { font: bold 17px verdana; color: #269; letter-spacing: .7px; margin-bottom: 20px; margin-top: 5px; text-align: left; width: 99%; }
        span.comment-html, span.comment-script { font: 12px monospace; letter-spacing: .1px; margin-bottom: 7px; margin-top: 5px; }
        span.comment-html { color: #5e85de; }
        span.comment-script { color: #578F73; }
        span#version { color: #777; font: 10px verdana; }
    </style>
</head>
<body>
    <div class="title">
        jQuery Raty - A Star Rating Plugin <span id="version">(current version: 0.5)</span></div>
    <div id="link">
        | <a href="http://github.com/downloads/wbotelhos/raty/jquery.raty-0.5.zip" target="_blank">
            Download</a> | <a href="http://github.com/wbotelhos/raty" target="_blank">Github</a>
        | <a href="http://wbotelhos.com/raty/changelog.txt" target="_blank">Change Log</a>
        | <a href="http://wbotelhos.com/raty/README.txt" target="_blank">Readme</a> | <a
            href="http://wbotelhos.com/raty/LICENSE.txt" target="_blank">Licence</a> |
    </div>
    <div id="coffee-container">
        <a id="coffee-link" href="https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&business=wbotelhos@gmail.com"
            target="_blank">buy me a coffee</a>
    </div>
    <br />
    <div class="text">
        jQuery <b>Raty</b> is a plugin that generates a customizable star rating automatically.</div>
    <div class="session">
        With default options:</div>
    <div id="default">
    </div>
    <div class="source">
        $('#default').raty();<br />
        <br />
        &lt;div id="default"&gt;&lt;/div&gt;
    </div>
    <div class="session">
        Started with a score and read only value:</div>
    <div id="fixed">
    </div>
    <div class="source">
        $('#fixed').raty({<br />
        &nbsp;&nbsp;readOnly:&nbsp;&nbsp;true,<br />
        &nbsp;&nbsp;start:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2<br />
        });<br />
        <br />
        &lt;div id="fixed"&gt;&lt;/div&gt;
    </div>
    <div class="session">
        With a custom score name and a number of stars:</div>
    <div id="number">
    </div>
    <div class="source">
        $('#number').raty({<br />
        &nbsp;&nbsp;scoreName:&nbsp;&nbsp;'entity.score',<br />
        &nbsp;&nbsp;number:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;10<br />
        });<br />
        <br />
        &lt;div id="number"&gt;&lt;/div&gt;
    </div>
    <div class="session">
        With a custom hint and icons:</div>
    <div id="icon">
    </div>
    <div class="source">
        $('#icon').raty({<br />
        &nbsp;&nbsp;hintList:&nbsp;&nbsp;['a', '', null, 'd', '5'],<br />
        &nbsp;&nbsp;starOn:&nbsp;&nbsp;&nbsp;&nbsp;'medal-on.png',<br />
        &nbsp;&nbsp;starOff:&nbsp;&nbsp;&nbsp;'medal-off.png'<br />
        });<br />
        <br />
        &lt;div id="icon"&gt;&lt;/div&gt;
    </div>
    <div class="session">
        Using onClick function:</div>
    <div id="click">
    </div>
    <div class="source">
        $('#click').raty({<br />
        &nbsp;&nbsp;onClick: function(score) {<br />
        &nbsp;&nbsp;&nbsp;&nbsp;alert('score: ' + score);<br />
        &nbsp;&nbsp;}<br />
        });<br />
        <br />
        &lt;div id="click"&gt;&lt;/div&gt;
    </div>
    <div class="session">
        Displaying half star:</div>
    <div id="half">
    </div>
    <div class="source">
        $('#half').raty({<br />
        &nbsp;&nbsp;start:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3.3,<br />
        &nbsp;&nbsp;showHalf:&nbsp;&nbsp;true<br />
        });<br />
        <br />
        &lt;div id="half"&gt;&lt;/div&gt;
    </div>
    <div class="session">
        With a default cancel button:</div>
    <div id="cancel">
    </div>
    <div class="source">
        $('#cancel').raty({<br />
        &nbsp;&nbsp;showCancel: true<br />
        });<br />
        <br />
        &lt;div id="cancel"&gt;&lt;/div&gt;
    </div>
    <div class="session">
        With a custom cancel button:</div>
    <div id="cancel-custom">
    </div>
    <div class="source">
        $('#cancel-custom').raty({<br />
        &nbsp;&nbsp;cancelHint:&nbsp;&nbsp;&nbsp;'remove my rating!',<br />
        &nbsp;&nbsp;cancelPlace:&nbsp;&nbsp;'right',<br />
        &nbsp;&nbsp;showCancel:&nbsp;&nbsp;&nbsp;true<br />
        &nbsp;&nbsp;onClick: function(score) {<br />
        &nbsp;&nbsp;&nbsp;&nbsp;alert('score: ' + score);<br />
        &nbsp;&nbsp;}<br />
        });<br />
        <br />
        &lt;div id="cancel-custom"&gt;&lt;/div&gt;
    </div>
    <div class="session">
        Default options:</div>
    <div class="source">
        cancelHint:&nbsp;&nbsp;&nbsp;'cancel this rating!'<br />
        <div class="notice">
            The hint information.</div>
        cancelOff:&nbsp;&nbsp;&nbsp;&nbsp;'cancel-off.png'<br />
        <div class="notice">
            Name of the cancel image off.</div>
        cancelOn:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'cancel-on.png'<br />
        <div class="notice">
            Name of the cancel image on.</div>
        cancelPlace:&nbsp;&nbsp;'left'<br />
        <div class="notice">
            Position of the cancel button.</div>
        hintList:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;['bad', 'poor', 'regular', 'good', 'gorgeous']<br />
        <div class="notice">
            List of names that will be used as a hint on each star.</div>
        number:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;5<br />
        <div class="notice">
            Number of stars that will be presented.</div>
        path:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'img/'<br />
        <div class="notice">
            Path where are the images of the stars.</div>
        readOnly:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;false<br />
        <div class="notice">
            If the stars will be read-only.</div>
        scoreName:&nbsp;&nbsp;&nbsp;&nbsp;'score'<br />
        <div class="notice">
            Name of the hidden field that holds the score value.</div>
        showCancel:&nbsp;&nbsp;&nbsp;false<br />
        <div class="notice">
            If will be showed a button to cancel the rating.</div>
        showHalf:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;false<br />
        <div class="notice">
            If will show half star if come a float number as score.</div>
        starHalf:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'star-half.png'<br />
        <div class="notice">
            The name of the half star image.</div>
        start:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0<br />
        <div class="notice">
            Number of stars to be selected.</div>
        starOff:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'star-off.png'<br />
        <div class="notice">
            Name of the star image off.</div>
        starOn:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'star-on.png'<br />
        <div class="notice">
            Name of the star image on.</div>
        <span class="comment-script">//onClick:&nbsp;&nbsp;&nbsp;&nbsp;function() { alert('clicked!');
            }</span>
        <div class="notice">
            Function that returns the selected value.</div>
    </div>
    <div class="session">
        Public functions: *</div>
    <div class="source">
        $.fn.raty.start(3);</div>
    <div class="description">
        Starting the rating with 3 stars later. Half star not supported.</div>
    <div class="source">
        $.fn.raty.readOnly(true);</div>
    <div class="description">
        Adjusts the rating for read-only later.</div>
    <div class="source">
        $.fn.raty.click(2);</div>
    <div class="description">
        Click in the star number 2 later.</div>
    <div class="notice">
        * Should come after the current raty and before the anothers one. Because it takes
        the last called raty.</div>
    <br />
    <div id="adsense">
        <script type="text/javascript">
            google_ad_client = "pub-2416130166150078";
            google_ad_slot = "1875587110";
            google_ad_width = 468;
            google_ad_height = 15;
			</script>
        <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
    </div>
</body>
<script type="text/javascript">
    $(function () {

        $('div#default').raty();

        $('div#fixed').raty({
            readOnly: true,
            start: 2
        });

        $('div#number').raty({
            scoreName: 'entity.score',
            number: 10
        });

        $('div#icon').raty({
            hintList: ['a', '', null, 'd', '5'],
            starOn: 'medal-on.png',
            starOff: 'medal-off.png'
        });

        $('div#click').raty({
            onClick: function (score) {
                alert('score: ' + score);
            }
        });

        $('div#half').raty({
            start: 3.3,
            showHalf: true
        });

        $('div#cancel').raty({
            showCancel: true
        });

        $('div#cancel-custom').raty({
            cancelHint: 'remove my rating!',
            cancelPlace: 'right',
            showCancel: true,
            onClick: function (score) {
                alert('score: ' + score);
            }
        });

    });

    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-17006803-1']);
    _gaq.push(['_trackPageview']);

    (function () {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
	</script>
</html>
